<template>
    <!-- 头部 -->
    <div>
        <CreaterHeader></CreaterHeader>
    </div>
    <div class="pgc-content">
        <div class="layer">
            <div class="pgc-registration-type">
                <div class="welcome">
                    <div class="welcome-divider"></div>
                    <div class="welcome-title">欢迎来到头条号创作者平台</div>
                    <div class="welcome-divider reverse"></div>
                </div> 
                <!-- 步骤 -->
                <div class="register-steps">
                    <div class="byte-steps-item " :class="step == 1 ? 'byte-steps-item-process' :'byte-steps-item-wait'">
                        <div class="byte-steps-item-icon">
                            <div class="byte-steps-icon">1</div>
                        </div>
                        <div class="byte-steps-item-content">
                            <div class="byte-steps-item-title">
                                <span>选择账号类型</span>
                            </div>
                        </div> 
                    </div> 
                    <div class="byte-steps-item byte-steps-item-wait"  :class="step == 2 ? 'byte-steps-item-process' :'byte-steps-item-wait'">
                        <div class="byte-steps-item-icon">
                            <div class="byte-steps-icon">2</div>
                        </div>
                        <div class="byte-steps-item-content">
                            <div class="byte-steps-item-title">
                                <span>完善账号信息</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 内容 -->
                <div v-show="step==1">
                <div class="type-block-group">
                    <div class="type-block-wrapper">
                    <div class="type-block">
                        <div class="type-icon personal"></div>
                        <div class="type-name-block">
                            <div class="type-name">个人</div>
                            <div class="type-desc">适合垂直领域专家、达人、爱好者及其他自然人</div>
                        </div>
                        <button class="byte-btn" type="button" @click="nextStep">
                            <span>选择</span>
                        </button>
                    </div> 
                    </div>
                </div>
                </div>

                <div v-show="step==2">
                   <form class="byte-form" >

                        <div class="byte-form-item">
                            <div class="byte-form-layout-horizontal">
                             
                                <div class="byte-form-label-item">
                                    <span><strong>*</strong>昵称</span>
                                </div>
                                <div class="byte-form-item-wrapper">
                                    <div class="byte-form-item-control" id="nickName">
                                        <div class="byte-form-item-wrapper-children">
                                            <input v-model.trim="user.nickName" @change="checkNickName" type="text" class="inputwrapper byte-input byte-input-size-default" placeholder="请输入" />
                                        </div>
                                        <div class="byte-form-message slideDown-enter-done">
                                            <span v-text="msgNickName"></span>
                                        </div> 
                                    </div>
                                    <span class="inputwrapper-len">
                                        <span v-text="nickNameNum"></span>/<span>10</span>
                                    </span>
                                    <div class="byte-form-extra">
                                        <span>2～10个字，请勿使用含特殊符号或明显营销推广意图的媒体名，详见<a class="slink" target="_blank" href="https://mp.toutiao.com/docs/baike/2789/20588/#账号基本信息审核规范">《账号基本信息审核规范》</a></span>
                                    </div>
                                </div>
                               
                            </div>
                        </div>

                            <div class="byte-form-item">
                                <div class="byte-form-layout-horizontal">
                                    <div class="byte-form-label-item">
                                        <span>简介</span>
                                    </div>
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="description">
                                            <div class="byte-form-item-wrapper-children">
                                                <textarea v-model.trim="user.describe" @change="checkDesc" class="byte-textarea inputwrapper" placeholder="请输入" />
                                            </div>
                                                <div class="byte-form-message slideDown-enter-done">
                                                    <span v-text="msgDesc"></span>
                                                </div>
                                        </div>
                                        <span class="inputwrapper-len">
                                            <span v-text="descNum"></span>/<span>30</span>
                                        </span>
                                        <div class="byte-form-extra">
                                            <span>1. 30 个字以内，内容完整通顺，无特殊符号
                                            2. 展示个人特色，包括个人经历、擅长领域等（如：90后工科男；摄影爱好者；10年手绘经验）
                                            3. 介绍创作内容，包括创作方向、创作形态、更新频率等（如：健身攻略；烘焙食谱每日更新；萌宠逗趣时刻）</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 头像 -->
                            <div class="byte-form-item upload-item">
                                <div class="byte-form-layout-horizontal">
                                    <div class="byte-form-label-item">
                                        <span><strong>*</strong>头像</span>
                                    </div>
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="avatar_uri">
                                            <div class="byte-form-item-wrapper-children">
                                                <div class="avatar-uploader">
                                                    <div class="avatar-uploader-imagewrapper">
                                                        <div class="matrix-img-wrap">
                                                            <div v-if="user.avatar">
                                                                <img role="presentation" id="preview" :src="user.avatar" />
                                                            </div>
                                                            <div v-else>
                                                                <img role="presentation" id="preview" src="../../assets/image/header.png" />
                                                            </div>

                                                            <div class=" upload-handler">
                                                              <input multiple="multiple" type="file" accept="image/*" id="photo" @change="changeImg($event)" />

                                                           
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> 
                                        </div>
                                        
                                        <div class="byte-form-extra">
                                            <span>清晰、健康、代表品牌形象，请勿使用二维码</span>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="byte-form-item">
                                <div class="byte-form-layout-horizontal">
                                    <div class="byte-form-label-item">
                                        <span><strong>*</strong>注册地址</span>
                                    </div>
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="country">
                                            <div class="byte-form-item-wrapper-children">
                                                <el-cascader size='large' :options='options' v-model='selectedOptions' @change='addressChange' style="width:600px">
                                                </el-cascader>
                                            </div>
                                            <div class="byte-form-message slideDown-enter-done">
                                                <span v-text="msgAddress"></span>
                                            </div>
                                        </div>
                            
                                       
                                    </div>
                                </div>
                            </div>
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                            <div class="byte-form-item">
                                <div class="byte-form-layout-horizontal">
                                    <div class="byte-form-label-item">
                                        <span><strong>*</strong>内容类别</span>
                                    </div>
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="content_category">
                                        
                                                <el-form-item  prop="category">
                                                    <el-select v-model="ruleForm.category"  placeholder="请选择内容类别" style="width:520px">
                                                        <div v-for="(item,index) in contentCategory" :key="index">
                                                        <el-option :label="item" :value="index" ></el-option>
                                                        </div>
                                            
                                                    </el-select>
                                                </el-form-item>
                                        </div>
                                        
                            
                                    </div>
                                </div>
                            </div>

                            <div class="byte-form-item">
                                <div class="byte-form-layout-horizontal">
                                    <div class="byte-form-label-item">
                                        <span><strong>*</strong>入驻原因</span>
                                    </div>
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="reg_motivation">
                            
                                            <el-form-item prop="regMotivation">
                                                <el-select v-model="ruleForm.regMotivation" placeholder="请选择" style="width:520px">
                                                    <div v-for="(item,index) in regMotivation" :key="index">
                                                        <el-option :label="item" :value="index"></el-option>
                                                    </div>
                            
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                        <div class="byte-form-extra">
                                            <span>请选择你入驻头条号的主要原因/途径</span>
                                        </div>
                            
                                    </div>
                                </div>
                            </div>
                            </el-form>
                          
                            <div class="byte-form-item">
                                <div class="byte-form-layout-horizontal">
                                 
                                    <div class="byte-form-item-wrapper">
                                        <div class="byte-form-item-control" id="agreen">
                                            <div class="byte-form-item-wrapper-children" style="justify-content: end;">
                                            
                                                <el-checkbox v-model="checked">
                                                    <span class="byte-checkbox-inner-text">
                                                        <span>
                                                            请同意<a href="/profile_v3_public/public/protocol/agreement">《头条号用户协议》</a>和
                                                            <a href="/profile_v3_public/public/protocol/privacy">《头条号隐私政策》</a>
                                                        </span>
                                                    </span>
                                                </el-checkbox>
                                            </div>
                                         
                                        </div>
                            
                                        
                                    </div>
                                </div>
                            </div>



                            <div class="byte-form-item" style="text-align: center;">
                                <div class="byte-row byte-form-layout-horizontal">
                                    <div class="byte-form-item-wrapper byte-col byte-col-24">
                    
                                       
                                        <button class="byte-btn byte-btn-warning byte-btn-size-large byte-btn-shape-square pgc-button bordered"
                                            type="button" @click="backStep"><span>上一步</span></button>
                                            <button @click="submitForm('ruleForm')"
                                                    class="byte-btn byte-btn-primary byte-btn-size-large byte-btn-shape-square pgc-button"
                                                    type="button">
                                                    <span>提交</span>
                                            </button>
                                          
                                        </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
<div class="pgc-footer">
    <div class="sfoot">
        <div><a target="_blank" rel="noopener noreferrer" class="sfoot_about"
                href="//web.toutiao.com/about/">关于今日头条</a><span>|</span><a target="_blank" rel="noopener noreferrer"
                href="/profile_v4_public/public/protocol/agreement" class="sfoot_agreement">用户协议</a><span>|</span><a
                target="_blank" rel="noopener noreferrer" href="/profile_v4_public/public/protocol/privacy"
                class="sfoot_agreement">隐私政策</a><span>|</span><a target="_blank" rel="noopener noreferrer"
                href="https://baike.toutiao.com/detail/236/238/0" class="sfoot_operation">社区规范</a><span>|</span><a
                target="_blank" rel="noopener noreferrer" href="/profile_v4_public/public/discipline-convention"
                class="sfoot_agreement">自律公约</a><span>|</span><span><a target="_blank" rel="noopener noreferrer"
                    href="/profile_v4_public/public/complains" class="sfoot_agreement">侵权投诉</a><span>|</span></span><a
                target="_blank" rel="noopener noreferrer" href="//web.toutiao.com/contact/"
                class="sfoot_contact">联系我们</a><span style="white-space: nowrap;"><span class="sfoot_copyright">© 2022
                    toutiao.com</span><span>&nbsp;All Rights Reserved</span></span></div>
    </div>
</div>
</template>

<script>
import  CreaterHeader  from "../../components/public/CreaterHeader.vue";
import user from '@/api/user/user'
import { regionData, CodeToText } from 'element-china-area-data'

import common from '@/assets/js/common'

export default {
    name: 'CreaterView',

    data() {
        return {
            user: {
                id:1,
                nickName: '',
                describe: '',
                address:'',
                avatar: require('../../assets/image/noneface.png')
            },
            img:'',
            // 错误信息
            msgNickName: "",
            nickNameNum: 0,
            msgDesc: "",
            descNum: 0,
        
           
            step: 1,
            contentCategory: ['财经', '搞笑', '摄影','科技','娱乐'],
            regMotivation: [
                '看到了头条的相关广告',
                '看到了某个作者发布的内容',
                '看到了头条官方发起的拉新活动',
                '看到了头条官号/权威媒体对头条的报道',
                '收到了朋友/其他用户的邀请',
                '收到了头条官方运营/员工的邀请',
                '其他'
            ],
             // element的表单
            ruleForm: {
               // userName:'',
                category: '',
                regMotivation:''
                
            },
            rules: {
                category: [
                    { required: true, message: '请选择类型内容', trigger: 'change' }

                ],
                regMotivation: [
                    { required: true, message: '请选择入驻原因', trigger: 'change' }
                ]
            },
          //  aggrement: false,
            checked: false,
            // 选择地址
            options: regionData,
            selectedOptions: ['110000', '110100', '110101']
        };
    },
    components: {
        CreaterHeader
    },
    mounted() {
         this.user.id = this.$store.state.userInfo.id;
        this.checkUser(this.user.id);
    },

    methods: {
         //根据id获取用户信息
        checkUser(id) {
            var that = this;
            user.getUser(id)
                .then(response => {
                    that.user = response.data.data.userInfo;
                    console.log(that.user.avatar);
                    that.$message({
                        type: 'success',
                        message:'查询信息成功！'
                    })
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        },
        changeImg(event) { 
            var that = this;
            common.setImgView('photo', 'preview');
            console.log(event.target.files[0]);
            that.img = event.target.files[0];
        
            
        },
       
   
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // alert('submit!');
                    this.checkForm();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        checkForm() {
            var that = this;
            if (that.checked == false) {
              //  alert("请同意相关协议！");
                that.$message({
                    type: 'warning',
                    message: '请同意相关协议!'
                })
                return false;
            } else {
                if (that.msgNickName.length == 0 && that.msgDesc.length == 0 && that.user.address != null && that.user.nickName.length > 0 &&
                    that.user.describe.length > 0 && that.user.address.length > 0) {
                    //更新用户信息
              //      alert("成功完善信息：" + that.user.nickName);
                    //更新用户信息
                    that.user.avatar = that.img;
                    console.log(that.user);
                    user.updateUser(that.user)
                        .then(response => {
                            console.log(response.data)
                            that.$message({
                                type: 'success',
                                message:'成功完善信息！'
                            })
                            //跳转
                            that.$router.push({
                                name:'home'
                            })    
                            
                        })
                        .catch(function (error) {
                            //处理错误情况
                            console.log(error);
                            alert("服务器出错..")
                        })

                } else {
                   // alert("请完善信息!");
                    that.$message({
                        type: 'warning',
                        message: '请完善信息!'
                    })
                    return false;
                }
            }
           
        },
        checkNickName: function () {
            var regNickName = /^[\u0391-\uFFE5A-Za-z]+$/;
            var length = this.user.nickName.length
            this.nickNameNum = length;
            if (this.user.nickName == "") {
                this.msgNickName = "用户名不能为空";
            } else if (!regNickName.test(this.user.nickName)) {
                this.msgNickName = "不可输入特殊字符"
            } else if (length < 2 || length > 10) {

                this.msgNickName = "长度在 2 到 10 个字符！";
            } else {
                this.msgNickName = "";
            }
        },
        checkDesc: function () {
            var length = this.user.describe.length;
            this.descNum = length;
            if (length > 30) {
                this.msgDesc = "30个字以内";
            }

        },addressChange(arr) {
            let address = CodeToText[arr[0]] + CodeToText[arr[1]] + CodeToText[arr[2]] + "";
            console.log(address);
            this.user.address = address;
            
        },
        nextStep() {
            this.step = 2;
            console.log("下一页");
        },
        backStep() {
            this.step = 1;
        },
    },
};

</script>

<style lang="scss">
// 复选框
.el-checkbox__input.is-checked .el-checkbox___inner {
    background-color:red !important;
    border-color:red !important;
}

.el-checkbox__inner:hover {
    border-color :red !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: red;
    border-color: red;
}
// 多选
.el-select-dropdown__item.selected {
    color: red;
    font-weight: 700;
}
//  输入框
.byte-form-item-control .el-select .el-input__wrapper .is-focus {
     box-shadow: 0 0 0 1px red inset !important;
 }

.byte-form-item-control .el-select .el-input.is-focus .el-input__wrapper {
     box-shadow: 0 0 0 1px red inset !important;
 }

 .byte-form-item-control .el-select .el-input__wrapper.is-focus {
     box-shadow: 0 0 0 1px red inset !important;
 }

.byte-form-item-control .el-input__wrapper.is-focus {
     box-shadow: 0 0 0 1px red inset;
     border: none;
 }
 .byte-form-item-control .el-form-item__content{
    margin-left: 0 !important;
 }
//  地址选择框
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
    color: red !important;
    font-weight: 700;
}
.el-cascader .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px red inset;
}
 @import '../../assets/css/CreaterView.css';
</style>